'use client'

import { useState } from 'react'
import { Wand2, BookOpen, Download, RefreshCw } from 'lucide-react'
import StoryForm from './StoryForm'
import StoryDisplay from './StoryDisplay'
import { StoryData } from '@/types/story'

export default function StoryGenerator() {
  const [story, setStory] = useState<StoryData | null>(null)
  const [isGenerating, setIsGenerating] = useState(false)

  // 处理故事生成
  const handleGenerateStory = async (formData: {
    theme: string
    ageGroup: string
    storyLength: string
    includeComics?: boolean
  }) => {
    setIsGenerating(true)
    try {
      const response = await fetch('/api/generate-story', {
        method: 'POST',
        headers: {
          'Content-Type': 'application/json',
        },
        body: JSON.stringify(formData),
      })

      if (!response.ok) {
        throw new Error('生成故事失败')
      }

      const storyData = await response.json()
      setStory(storyData)
    } catch (error) {
      console.error('生成故事时出错:', error)
      alert('生成故事失败，请稍后重试')
    } finally {
      setIsGenerating(false)
    }
  }

  // 重新生成故事
  const handleRegenerate = () => {
    setStory(null)
  }

  return (
    <div className="space-y-8">
      {/* 生成器卡片 */}
      <div className="story-card">
        <div className="flex items-center space-x-3 mb-6">
          <div className="p-2 bg-primary-100 rounded-lg">
            <Wand2 className="h-6 w-6 text-primary-600" />
          </div>
          <div>
            <h2 className="text-xl font-semibold text-gray-900">
              创建您的英语绘本
            </h2>
            <p className="text-gray-600">
              选择主题和参数，AI将为您生成阳光积极的故事和精美卡通漫画
            </p>
          </div>
        </div>

        {!story ? (
          <StoryForm onSubmit={handleGenerateStory} isGenerating={isGenerating} />
        ) : (
          <div className="space-y-4">
            <div className="flex items-center justify-between">
              <h3 className="text-lg font-semibold text-gray-900">
                您的故事已生成完成！
              </h3>
              <button
                onClick={handleRegenerate}
                className="btn-secondary flex items-center space-x-2"
              >
                <RefreshCw className="h-4 w-4" />
                <span>重新生成</span>
              </button>
            </div>
            <StoryDisplay story={story} />
          </div>
        )}
      </div>

      {/* 特色说明 */}
      {!story && (
        <div className="grid md:grid-cols-3 gap-6">
          <div className="story-card text-center">
            <div className="p-3 bg-yellow-100 rounded-full w-12 h-12 mx-auto mb-4 flex items-center justify-center">
              <BookOpen className="h-6 w-6 text-yellow-600" />
            </div>
            <h3 className="font-semibold text-gray-900 mb-2">阳光积极</h3>
            <p className="text-gray-600 text-sm">
              所有故事都充满正能量，传递积极向上的价值观
            </p>
          </div>
          <div className="story-card text-center">
            <div className="p-3 bg-green-100 rounded-full w-12 h-12 mx-auto mb-4 flex items-center justify-center">
              <Wand2 className="h-6 w-6 text-green-600" />
            </div>
            <h3 className="font-semibold text-gray-900 mb-2">精美插图</h3>
            <p className="text-gray-600 text-sm">
              AI生成的高质量插图和卡通漫画，与故事情节完美搭配
            </p>
          </div>
          <div className="story-card text-center">
            <div className="p-3 bg-blue-100 rounded-full w-12 h-12 mx-auto mb-4 flex items-center justify-center">
              <Download className="h-6 w-6 text-blue-600" />
            </div>
            <h3 className="font-semibold text-gray-900 mb-2">优美翻译</h3>
            <p className="text-gray-600 text-sm">
              简单易懂的英文表达，适合儿童阅读学习
            </p>
          </div>
        </div>
      )}
    </div>
  )
} 